<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../includes/jqueryui/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../includes/jqueryui/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" >
    $(function(){
      $('body').droppable({
        drop: function(event, ui) {
          console.log(event)
        }
      });
      $('.drag-me').draggable();
      $('#list').sortable()
    })
    function _click(){
      $('.drop-here').click()
      var x , y ;
      $(document).mousemove(function(e){
        
      })
    }
    </script>
    <style type="text/css">
      ul {list-style: none }
      .drop-here {
        width : 100px ;
        height: 100px ;
        background: red ;
        margin: 4px ;
        float:left;
      }
      .drop-here:hover {
        background: orange ;
      }
      .drag-me {
        width : 20px ;
        height: 20px ;
        background: green ;
        margin: 4px ;
        float:left;
      }
    </style>
  </head>
  <body>
    <div class="drop-here"><ul></ul></div>
    <ul id="list">
      <li class="drag-me"></li>
      <li class="drag-me"></li>
      <li class="drag-me"></li>
      <li class="drag-me"></li>
      <li class="drag-me"></li>
      <li class="drag-me"></li>
      <li class="drag-me"></li>
    </ul>
    <a href="?" >Reload</a>
  </body>
</html>
